<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>散点 - 全国市县经纬度</title>

    <style>
        html,
        body,
        .container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        ,
    </style>
</head>

<body>
    <div id="map" class="container"></div>
    <script src="//webapi.amap.com/maps?v=1.4.15&key=76ae9c285e0e6b8e4f9a2c4ae83432c8&&"></script>
    <script src="//webapi.amap.com/loca?v=1.3.2&key=76ae9c285e0e6b8e4f9a2c4ae83432c8&"></script>
    <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
    <script>
        var citys = [{
            "lnglat": [120.290419, 31.57395],
            "name": "五爱广场",
            "style": 2
        }, {
            "lnglat": [120.30029, 31.581555],
            "name": "胜利门",
            "style": 2
        }];
        var citys2 = [{
            "lnglat": [120.306555, 31.567734],
            "name": "南禅寺",
            "style": 2
        }, {
            "lnglat": [120.320889, 31.581555],
            "name": "上马墩",
            "style": 2
        }, {
            "lnglat": [120.2869, 31.567223],
            "name": "绿溪大桥",
            "style": 2
        }, {
            "lnglat": [120.308272, 31.578338],
            "name": "东林广场",
            "style": 2
        }, {
            "lnglat": [120.299796, 31.575824],
            "name": "三阳广场",
            "style": 2
        }, {
            "lnglat": [120.306673, 31.589415],
            "name": "无锡火车站",
            "style": 2
        }, {
            "lnglat": [120.303498, 31.600893],
            "name": "民丰",
            "style": 2
        }, {
            "lnglat": [120.305128, 31.609774],
            "name": "庄前",
            "style": 2
        }, {
            "lnglat": [120.304528, 31.626622],
            "name": "刘潭",
            "style": 2
        }, {
            "lnglat": [120.304227, 31.637985],
            "name": "天一",
            "style": 2
        }, {
            "lnglat": [120.303755, 31.645914],
            "name": "西漳",
            "style": 2
        }, {
            "lnglat": [120.314827, 31.662389],
            "name": "锡北运河",
            "style": 2
        }, {
            "lnglat": [120.315256, 31.675283],
            "name": "堰桥",
            "style": 2
        }, {
            "lnglat": [120.305171, 31.561738],
            "name": "谈渡桥",
            "style": 2
        }, {
            "lnglat": [120.305171, 31.555192],
            "name": "太湖广场",
            "style": 2
        }, {
            "lnglat": [120.311265, 31.549377],
            "name": "淸名桥",
            "style": 2
        }, {
            "lnglat": [120.319462, 31.541916],
            "name": "人民医院",
            "style": 2
        }, {
            "lnglat": [120.328088, 31.533686],
            "name": "华清大桥",
            "style": 2
        }, {
            "lnglat": [120.324741, 31.520993],
            "name": "杨名",
            "style": 2
        }, {
            "lnglat": [120.324183, 31.510017],
            "name": "南湖家园",
            "style": 2
        }, {
            "lnglat": [120.326372, 31.500577],
            "name": "唐铁桥",
            "style": 2
        }, {
            "lnglat": [120.320406, 31.493259],
            "name": "金匮公园",
            "style": 2
        }, {
            "lnglat": [120.304957, 31.4911],
            "name": "市民中心",
            "style": 2
        }, {
            "lnglat": [120.304957, 31.4911],
            "name": "文化宫",
            "style": 2
        }, {
            "lnglat": [120.278521, 31.483671],
            "name": "江南大学",
            "style": 2
        }, {
            "lnglat": [120.277362, 31.473533],
            "name": "长广溪",
            "style": 2
        }, {
            "lnglat": [120.279723, 31.459952],
            "name": "雪浪",
            "style": 2
        }, {
            "lnglat": [120.274272, 31.447615],
            "name": "葛康桥",
            "style": 2
        }, {
            "lnglat": [120.270281, 31.436887],
            "name": "南方泉",
            "style": 2
        }];
        var map = new AMap.Map('map', {
            mapStyle: 'amap://styles/0b668d1b6e40c6c1dcadae07cec762bd',
            zoom: 14,
            center: [120.306731, 31.581733]
        });

        var layer = new Loca.ScatterPointLayer({
            map: map
        });

        // 传入原始数据
        layer.setData(citys, {
            lnglat: 'lnglat' // 指定坐标数据的来源，数据格式: 经度在前，维度在后，数组格式。
        });

        // 配置样式
        layer.setOptions({
            unit: 'px',
            style: {
                radius: 10, // 圆形半径，单位像素
                color: '#FF0000', // 填充颜色
                borderWidth: 0.5, // 边框宽度
                borderColor: '#14B4C9' // 边框颜色
            }
        });

        layer.render();


        var layer2 = new Loca.ScatterPointLayer({
            map: map
        });

        // 传入原始数据
        layer2.setData(citys2, {
            lnglat: 'lnglat' // 指定坐标数据的来源，数据格式: 经度在前，维度在后，数组格式。
        });

        // 配置样式
        layer2.setOptions({
            unit: 'px',
            style: {
                radius: 10, // 圆形半径，单位像素
                color: ' #14B4C9', // 填充颜色
                borderWidth: 0.5, // 边框宽度
                borderColor: '#14B4C9' // 边框颜色
            }
        });

        layer2.render();
        AMapUI.loadUI(['control/BasicControl'], function (BasicControl) {

            //添加一个缩放控件
            map.addControl(new BasicControl.Zoom({
                position: 'ln'
            }));


            // //图层切换控件
            // map.addControl(new BasicControl.LayerSwitcher({
            //     position: 'rt'
            // }));
        });

        // 创建gps坐标位置点标记
        var lnglat = [120.306731, 31.581733];
        var m1 = new AMap.Marker({
            position: lnglat,
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png"
        });
        map.add(m1);
        m1.setLabel({
            offset: new AMap.Pixel(20, 20),
            content: "我的位置"
        });
    </script>
</body>

</html>